<template>
  <div>
    <group title="Form" title-color="#04be02">
      <cell title="address" link="component/address">
        <span class="demo-icon" slot="icon">&#xe61b;</span>
      </cell>
      <cell title="calendar" link="component/calendar">
        <span class="demo-icon" slot="icon">&#xe62b;</span>
      </cell>
      <cell title="cell" link="component/cell">
        <span class="demo-icon" slot="icon">&#xe62a;</span>
      </cell>
      <cell title="checklist" link="component/checklist">
        <span class="demo-icon" slot="icon">&#xe61d;</span>
      </cell>
      <cell title="checker" link="component/checker">
        <span class="demo-icon" slot="icon">&#xe655;</span>
      </cell>
      <cell title="color-picker" link="component/color-picker">
        <span class="demo-icon" slot="icon" style="color:#f2c400;">&#xe63f;</span>
      </cell>
      <cell title="datetime" link="component/datetime">
        <span class="demo-icon" slot="icon">&#xe60a;</span>
      </cell>
      <cell title="inline-calendar" link="component/inline-calendar">
        <span class="demo-icon" slot="icon">&#xe62b;</span>
      </cell>
      <cell title="radio" link="component/radio">
        <span class="demo-icon" slot="icon">&#xe60f;</span>
      </cell>
      <cell title="range" link="component/range">
        <span class="demo-icon" slot="icon">&#xe60b;</span>
      </cell>
      <cell title="rater" link="component/rater">
        <span class="demo-icon" slot="icon">&#xe606;</span>
      </cell>
      <cell title="selector" link="component/selector">
        <span class="demo-icon" slot="icon">&#xe607;</span>
      </cell>
      <cell title="switch" link="component/switch">
        <span class="demo-icon" slot="icon">&#xe61c;</span>
      </cell>
      <cell title="x-button" link="component/x-button">
        <span class="demo-icon" slot="icon">&#xe616;</span>
      </cell>
      <cell title="x-input" link="component/input">
        <span class="demo-icon" slot="icon">&#xe614;</span>
      </cell>
      <cell title="x-textarea" link="component/textarea">
        <span class="demo-icon" slot="icon">&#xe611;</span>
      </cell>
      <cell title="x-number" link="component/number">
        <span class="demo-icon" slot="icon">&#xe605;</span>
      </cell>
    </group>

    <group title="Message && Tip" title-color="#04be02">
      <cell title="alert" link="component/alert" value="Based on Dialog">
        <span class="demo-icon" slot="icon">&#xe603;</span>
      </cell>
      <cell title="confirm" link="component/confirm" value="Based on Dialog">
        <span class="demo-icon" slot="icon">&#xe608;</span>
      </cell>
      <cell title="dialog" link="component/dialog">
        <span class="demo-icon" slot="icon">&#xe608;</span>
      </cell>
      <cell title="loading" link="component/loading">
        <span class="demo-icon" slot="icon">&#xe610;</span>
      </cell>
      <cell title="toast" link="component/toast">
        <span class="demo-icon" slot="icon">&#xe625;</span>
      </cell>
      <cell title="popover" link="component/popover">
        <span class="demo-icon" slot="icon">&#xe65f;</span>
      </cell>
      <cell title="actionsheet" link="component/actionsheet">
        <span class="demo-icon" slot="icon">&#xe624;</span>
      </cell>
    </group>

    <group title="UI" title-color="#04be02">
      <cell title="badge" link="component/badge">
        <span class="demo-icon" slot="icon" style="color:#f74c31;">&#xe65b;</span>
      </cell>
      <cell title="blur" link="component/blur">
        <span class="demo-icon" slot="icon">&#xe640;</span>
      </cell>
      <cell title="button-tab" link="component/button-tab">
        <span class="demo-icon" slot="icon" style="font-size: 15px;vertical-align: 6px;">&#xe659;</span>
      </cell>
      <cell title="circle" link="component/circle">
        <span class="demo-icon" slot="icon">&#xe63d;</span>
      </cell>
      <cell title="countup" link="component/countup">
        <span class="demo-icon" slot="icon">&#xe63e;</span>
      </cell>
      <cell title="countdown" link="component/countdown">
        <span class="demo-icon" slot="icon">&#xe653;</span>
      </cell>
      <cell title="clocker" link="component/clocker">
        <span class="demo-icon" slot="icon">&#xe620;</span>
      </cell>
      <cell title="flexbox" link="component/flexbox">
        <span class="demo-icon" slot="icon">&#xe61f;</span>
      </cell>
      <cell title="icon" link="component/icon">
        <span class="demo-icon" slot="icon">&#xe619;</span>
      </cell>
      <cell title="divider" link="component/divider">
        <span class="demo-icon" slot="icon">&#xe65d;</span>
      </cell>
      <cell title="panel" link="component/panel">
        <span class="demo-icon" slot="icon">&#xe658;</span>
      </cell>
      <cell title="card" link="component/card">
        <span class="demo-icon" slot="icon">&#xe658;</span>
      </cell>
      <cell title="previewer" link="component/previewer">
        <span class="demo-icon" slot="icon">&#xe65c;</span>
      </cell>
      <cell title="picker" link="component/picker">
        <span class="demo-icon" slot="icon">&#xe627;</span>
      </cell>
      <cell title="popup" link="component/popup">
        <span class="demo-icon" slot="icon">&#xe61e;</span>
      </cell>
      <cell title="popup-picker" link="component/popup-picker">
        <span class="demo-icon" slot="icon">&#xe626;</span>
      </cell>
      <cell title="progress" link="component/progress">
        <span class="demo-icon" slot="icon">&#xe618;</span>
      </cell>
      <cell title="reddot" link="component/reddot">
        <span class="demo-icon" slot="icon" style="color:#f74c31;">&#xe63f;</span>
      </cell>
      <cell title="swiper" link="component/swiper">
        <span class="demo-icon" slot="icon">&#xe612;</span>
      </cell>
      <cell title="sticky" link="component/sticky">
        <span class="demo-icon" slot="icon">&#xe623;</span>
      </cell>
      <cell title="search" link="component/search">
        <span class="demo-icon" slot="icon">&#xe63b;</span>
      </cell>
      <cell title="spinner" link="component/spinner">
        <span class="demo-icon" slot="icon">&#xe610;</span>
      </cell>
      <cell title="tab" link="component/tab">
        <span class="demo-icon" slot="icon">&#xe615;</span>
      </cell>
      <cell title="tabbar" link="component/tabbar">
        <span class="demo-icon" slot="icon">&#xe657;</span>
      </cell>
      <cell title="tabbar with link" link="component/tabbar-link">
        <span class="demo-icon" slot="icon">&#xe657;</span>
      </cell>
      <cell title="timeline" link="component/timeline">
        <span class="demo-icon" slot="icon">&#xe656;</span>
      </cell>
      <cell title="step" link="component/step">
        <span class="demo-icon" slot="icon">&#xe65e;</span>
      </cell>
      <cell title="x-header" link="component/x-header">
        <span class="demo-icon" slot="icon">&#xe654;</span>
      </cell>
    </group>

    <group title="Scroller" title-color="#04be02">
      <cell title="pulldown" link="component/pulldown">
        <span class="demo-icon" slot="icon">&#xe64f;</span>
      </cell>
      <cell title="pullup" link="component/pullup">
        <span class="demo-icon" slot="icon">&#xe650;</span>
      </cell>
      <cell title="pulldown & pullup" link="component/pulldown-pullup">
        <span class="demo-icon" slot="icon">&#xe64f;</span>
      </cell>
      <cell title="scroller" link="component/scroller">
        <span class="demo-icon" slot="icon">&#xe641;</span>
      </cell>
      <cell title="multi full-height scroller" link="component/scroller/full">
        <span class="demo-icon" slot="icon">&#xe641;</span>
      </cell>
      <cell title="Swiper within Scroller" link="component/scroller-swiper">
        <span class="demo-icon" slot="icon">&#xe641;</span>
      </cell>
      <cell title="Scroller with XHeader" link="component/scroller/header">
        <span class="demo-icon" slot="icon">&#xe641;</span>
      </cell>
    </group>

    <group title="Other" title-color="#04be02">
      <cell title="comment" value="评论" link="component/comment">
        <span class="demo-icon" slot="icon">&#xe652;</span>
      </cell>
      <cell title="emotion" value="微信表情" link="component/emotion">
        <span class="demo-icon" slot="icon">&#xe63c;</span>
      </cell>
      <cell title="masker" link="component/masker">
        <span class="demo-icon" slot="icon">&#xe651;</span>
      </cell>
      <cell title="orientation" value="横竖屏切换提示" link="component/orientation">
        <span class="demo-icon" slot="icon">&#xe628;</span>
      </cell>
      <cell title="shake" value="摇一摇" link="component/shake">
        <span class="demo-icon" slot="icon">&#xe629;</span>
      </cell>
      <cell title="x-img" value="延迟加载及webp切换支持" link="component/x-img">
        <span class="demo-icon" slot="icon">&#xe602;</span>
      </cell>
      <cell title="qrcode" link="component/qrcode">
        <span class="demo-icon" slot="icon">&#xe65a;</span>
      </cell>
    </group>

    <group title="CSS Utils" title-color="#04be02">
      <cell title="1px" value="1px解决方案(FrozenUI)" link="component/1px"></cell>
      <cell title="Center(Based on Flexbox)" value="水平垂直居中" link="component/center"></cell>
      <cell title="Close icon" value="关闭字符" link="component/close"></cell>
    </group>

     <group title="Plugins" title-color="#04be02">
      <cell title="Device" value="简单设备信息检测" link="plugin/device"></cell>
    </group>

    <group title="TODO" title-color="#04be02" v-if="showTodo">
      <cell title="短信验证组件" link="component/address"></cell>
      <cell title="图片验证码" link="component/rater"></cell>
      <cell title="Calendar" link="component/calendar"></cell>
    </group>

    <group title="Demo" title-color="#04be02">
      <cell title="微信设置页面" link="demo/wechat">
        <span class="demo-icon" slot="icon">&#xe600;</span>
      </cell>
      <cell title="小蚁摄像设置" link="demo/yi">
        <span class="demo-icon" slot="icon">&#xe622;</span>
      </cell>
    </group>

    <group title="Todo" title-color="#04be02" style="display: none;">
      <cell title="Step" link="component/step">
        <span class="demo-icon" slot="icon">&#xe62c;</span>
      </cell>
    </group>

  </div>
</template>

<script>
import { Cell, Group } from '../components'

/**
* fix firefox cell bottom border missing
*/

if (/firefox/i.test(navigator.userAgent)) {
  document.querySelector('body').classList.add('firefox')
}

export default {
  components: {
    Cell,
    Group
  },
  data () {
    return {
    }
  }
}
</script>

<style>
@import './style.css';
.center {
  margin-top: 15px;
  text-align: center;
}

body {
  font-family: Helvetica, sans-serif;
  background-color: #fbf9fe;
}

.firefox .weui_cells:after {
  transform-origin: 50% 50%;
}
</style>
